<!DOCTYPE html>
<html>
<head>
<script src="../resources/bower_components/jquery/dist/jquery.js"></script>
<style type="text/css">
#outerDiv {
	width: 400px;
	font-size:0;
	background-color: #ccc;
}

#imgTag {
	width: 100%;
	 
}

.spanElement {
	border: 1px solid black;
}

.divElement {
	border: 1px solid red;
}

#spanD {
	float: left;
}

.floatElement {
	float: left;
}

#spanFoo {
	height: 50px;
}

#textDiv {
	width: 300px;
	border-bottom: 1px solid #000;
}
</style>

</head>
<body>
	<span id='spanFoo' class="spanElement">span foo</span>

	<div id='outerDiv' class="divElement">
		<img src=Desert.jpg id='imgTag'></img>
	</div>
	<div>
		<span id='spanTag' class="spanElement">span bar</span> <span
			id='spanC' class="spanElement">span c</span> <span id='spanFloatA'
			class="spanElement floatElement">span float a</span> <span
			id='spanFloatB' class="spanElement floatElement">span float b</span>
	</div>

	<div id="textDiv">
		<span>text div text div text div text div text div text div
			text div text div text div text div text div text div text div text
			div text div text div text div text div text div text div text div
			text div text div </span>
	</div>
	<form>
		<span>span in form.</span>
	</form>
	<span>span</span>
	<span>span</span>
	<span style='display: block;'>span</span>
	<span>span</span>
</body>

</html>